<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📊 简单图表生成器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>📊 简单图表生成器</h1>
            <p>使用Canvas API创建交互式数据可视化图表</p>
        </header>

        <main>
            <!-- 控制面板 -->
            <div class="control-panel">
                <div class="chart-type-selector">
                    <h2>选择图表类型</h2>
                    <div class="chart-type-buttons">
                        <button class="chart-type-btn active" data-type="bar">柱状图</button>
                        <button class="chart-type-btn" data-type="line">折线图</button>
                        <button class="chart-type-btn" data-type="pie">饼图</button>
                    </div>
                </div>

                <!-- 数据输入区域 -->
                <div class="data-input">
                    <h2>数据输入</h2>
                    <div class="data-controls">
                        <div class="data-sets">
                            <div class="data-set">
                                <label>标签：</label>
                                <input type="text" class="label-input" placeholder="输入标签" value="A">
                                <label>值：</label>
                                <input type="number" class="value-input" placeholder="输入数值" value="85" min="0">
                                <label>颜色：</label>
                                <input type="color" class="color-input" value="#3498db">
                            </div>
                            <div class="data-set">
                                <label>标签：</label>
                                <input type="text" class="label-input" placeholder="输入标签" value="B">
                                <label>值：</label>
                                <input type="number" class="value-input" placeholder="输入数值" value="65" min="0">
                                <label>颜色：</label>
                                <input type="color" class="color-input" value="#e74c3c">
                            </div>
                            <div class="data-set">
                                <label>标签：</label>
                                <input type="text" class="label-input" placeholder="输入标签" value="C">
                                <label>值：</label>
                                <input type="number" class="value-input" placeholder="输入数值" value="45" min="0">
                                <label>颜色：</label>
                                <input type="color" class="color-input" value="#2ecc71">
                            </div>
                            <div class="data-set">
                                <label>标签：</label>
                                <input type="text" class="label-input" placeholder="输入标签" value="D">
                                <label>值：</label>
                                <input type="number" class="value-input" placeholder="输入数值" value="90" min="0">
                                <label>颜色：</label>
                                <input type="color" class="color-input" value="#f39c12">
                            </div>
                        </div>
                        <button id="addDataSet" class="add-btn">➕ 添加数据项</button>
                    </div>
                </div>

                <!-- 图表选项 -->
                <div class="chart-options">
                    <h2>图表选项</h2>
                    <div class="option-group">
                        <label for="chartTitle">图表标题：</label>
                        <input type="text" id="chartTitle" placeholder="输入标题" value="示例图表">
                    </div>
                    <div class="option-group">
                        <label for="showLegend">显示图例：</label>
                        <input type="checkbox" id="showLegend" checked>
                    </div>
                    <div class="option-group">
                        <label for="animation">启用动画：</label>
                        <input type="checkbox" id="animation" checked>
                    </div>
                </div>
            </div>

            <!-- 图表显示区域 -->
            <div class="chart-container">
                <div class="chart-wrapper">
                    <canvas id="chartCanvas" width="800" height="500"></canvas>
                </div>
            </div>
        </main>

        <footer>
            <p>© 2024 简单图表生成器 | 使用 Canvas API 构建</p>
        </footer>
    </div>

    <script src="script.js"></script>
</body>
</html>